<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { getSanjiApi, qingjingduihuasanjiApi } from '/api/request.js';
const props = defineProps({});
const platform = ref({});
const query = ref({
    id: '',
    page: 1,
    la: true,
    trigger: false,
    total: 1
});
const list = ref(null);
onLoad((e) => {
    query.value.id = e.id;
    query.value.title = e.title;
    query.value.biede = e.biede;
    console.log(query.value);
});
const fetchList = async (type = true) => {
    try {
        uni.showLoading({
            mask: true
        });
        let res;
        if (query.value.biede == '情景对话') {
            res = await qingjingduihuasanjiApi(query.value);
        } else {
            res = await getSanjiApi(query.value);
        }
        if (!type || !list.value) {
            list.value = [];
        }
        console.log(res);
        res.data.map((item) => {
            item.image = `http://zhangyu.aizhangyu.cn${item.image}`;
            list.value.push(item);
        });
    } catch (error) {
        console.log(error);
    }
};
onShow(async () => {
    if (!list.value || list.value.length < 1) {
        fetchList(false).finally(() => {
            uni.hideLoading();
        });
    }
    platform.value = uni.getStorageSync('platform');
});
const goback = () => {
    uni.navigateBack();
};
const showPage = (title, id) => {
    if (query.value.biede == '情景对话') {
        uni.navigateTo({
            url: '/pages/questionBank/components/qingjingduihua?title=' + title + '&id=' + id
        });
    } else {
        uni.navigateTo({
            url: '/pages/questionBank/components/wanxingtiankong?title=' + title + '&id=' + id
        });
    }
};
const handleReachBottom = () => {
    query.value.page = 1;
    query.value.trigger = true;
    fetchList(false).finally(() => {
        query.value.trigger = false;
        uni.hideLoading();
    });
};
</script>

<template>
    <view
        class="wrap"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <image
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
            <view class="title"> {{ query.title }} </view>
            <image
                style="opacity: 0"
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
        </view>
        <scroll-view
            scroll-y="true"
            :style="{ height: platform.gaodu - platform.dingbu - 96 + 'rpx' }"
        >
            <view class="body" v-if="list && list.length">
                <view
                    class="item uni-row"
                    v-for="(item, index) in list"
                    :key="index"
                    @click="showPage(item.name, item.id)"
                >
                    <image :src="item.image" class="icon"></image>
                    <view class="right">
                        <view class="name">
                            {{ item.name }}
                        </view>
                        <view class="footer-row uni-row">
                            <view class="wai">
                                <view
                                    class="li"
                                    :style="{
                                        width:
                                            item.question_count === 0
                                                ? '0%'
                                                : (item.question_count_log / item.question_count) *
                                                      100 +
                                                  '%'
                                    }"
                                >
                                </view>
                            </view>
                            <view class="biede">
                                学习进度{{
                                    item.question_count === 0
                                        ? '0%'
                                        : (
                                              (item.question_count_log / item.question_count) *
                                              100
                                          ).toFixed(0) + '%'
                                }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="nothing" v-if="list && list.length < 1">
                <image src="/static/img/nothing.png" class="img"></image>
                <view class="label"> 哎呀，这里什么内容都没有 </view>
            </view>
        </scroll-view>
    </view>
</template>

<style scoped lang="less">
.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
        }
    }

    .body {
        padding: 0 28rpx 40rpx;

        .item {
            justify-content: space-between;
            padding: 0 20rpx;
            height: 140rpx;
            background: #ffffff;
            border-radius: 16rpx;
            margin-bottom: 16rpx;

            .icon {
                width: 100rpx;
                height: 100rpx;
                margin-right: 24rpx;
                margin-right: 22rpx;
                border-radius: 16rpx;
            }

            .right {
                flex: 1;

                .name {
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #333333;
                }

                .footer-row {
                    margin-top: 24rpx;
                    justify-content: space-between;

                    .wai {
                        width: 360rpx;
                        height: 12rpx;
                        border-radius: 9rpx;
                        background-color: red;
                        background-color: #f0e8ff;

                        .li {
                            height: 12rpx;
                            border-radius: 9rpx;
                            background-color: #9561f3;
                        }
                    }

                    .biede {
                        font-weight: 400;
                        font-size: 20rpx;
                        color: #333333;
                    }
                }
            }
        }
    }
}
</style>
